/*-------------------   外部导入   -------------------------------------------------------------------*/

import { Card, Button, Col, Row, Input, Select } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import { useState, useEffect } from "react";
import {
  useSearchParams,
  NavLink,
  useNavigate,
  useLocation
} from "react-router-dom";
// 导入样式
import "../../../../assets/style/home.scss";
// 导入接口
import { getCarPayHistoryRecordRenewSubmit } from "../../../../api/admin";
/*-------------------   外部导入   -------------------------------------------------------------------*/
function VehicleInformation(props: any) {
  const navigate = useNavigate();
  /*-------------------   定义数据   -------------------------------------------------------------------*/
  var arr = {
    "flowComponent": "addCar",
    "carNum": "车牌",
    "carBrand": "品牌",
    "carType": "9903",
    "carColor": "颜色",
    "remark": "备注",
    "startTime": "2023-05-01 21:31:48",
    "endTime": "2037-01-01",
    "leaseType": "NM",
    "carAttrs": "",
    "attrs": [
      {
        "domain": "COMMON",
        "listShow": "Y",
        "page": -1,
        "records": 0,
        "required": "N",
        "row": 0,
        "specCd": "6443000036",
        "specHoldplace": "业主车辆",
        "specId": "6443000036",
        "specName": "业主车辆",
        "specShow": "Y",
        "specType": "3344",
        "specValueType": "1001",
        "statusCd": "0",
        "tableName": "owner_car_attr",
        "total": 0,
        "value": "true",
        "values": [
          {
            "page": -1,
            "records": 0,
            "row": 0,
            "specId": "6443000036",
            "statusCd": "0",
            "total": 0,
            "value": "false",
            "valueId": "112022031522890163",
            "valueName": "否",
            "valueShow": "Y"
          },
          {
            "page": -1,
            "records": 0,
            "row": 0,
            "specId": "6443000036",
            "statusCd": "0",
            "total": 0,
            "value": "true",
            "valueId": "112022031502670160",
            "valueName": "是",
            "valueShow": "Y"
          }
        ]
      }
    ],
    "value": "",
    "index": 2,
    "communityId": "2023032658120002",
    "ownerId": localStorage.getItem("ownerId"),
    "psId": "792023042712642177"
  };
  var [obj, setObj] = useState(arr)

  /*-------------------   定义数据   -------------------------------------------------------------------*/

  /*-------------------   定义方法   -------------------------------------------------------------------*/
  const submitTo = () => {
    getCarPayHistoryRecordRenewSubmit(obj).then((res: any) => {
      console.log(res)
      // 提交完成，跳转 
      navigate(`/pages/property/listOwnerCar`);
    })
  }
  /*-------------------   定义方法   -------------------------------------------------------------------*/

  // 车辆信息  组件
  return (
    <div className="VehicleInformation">
      <Card title="车辆信息">
        <Row gutter={24}>
          <Col span={4}>车牌号</Col>
          <Col span={20}>
            <Input placeholder="必填，请填写车牌号" allowClear
              value={obj.carNum} onChange={(e) => {
                setObj({ ...obj, carNum: e.target.value })
              }}
            />
          </Col>
        </Row>
        <br />
        <Row gutter={24}>
          <Col span={4}>车品牌</Col>
          <Col span={20}>
            <Input placeholder="可选，请填写车品牌，如 宝马X6" allowClear
              value={obj.carBrand} onChange={(e) => {
                setObj({ ...obj, carBrand: e.target.value })
              }}
            />
          </Col>
        </Row>
        <br />
        <Row gutter={24}>
          <Col span={4}>车类型</Col>
          <Col span={20}>
            <Select
              style={{ width: "100%" }}
              showSearch
              size="large"
              onChange={(e) => {
                setObj({ ...obj, carType: e })
              }}
              placeholder="必填，请选择类型"
              optionFilterProp="children"
              filterOption={(input, option) =>
                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
              }
              options={[
                {
                  value: '9901',
                  label: '家用小汽车',
                },
                {
                  value: '9902',
                  label: '客车',
                },
                {
                  value: '9903',
                  label: '货车',
                },
                {
                  value: '9904',
                  label: '电动车',
                },
                {
                  value: '9905',
                  label: '三轮车',
                },
              ]}
            />
          </Col>
        </Row>
        <br />
        <Row gutter={24}>
          <Col span={4}>颜色</Col>
          <Col span={20}>
            <Input placeholder="可选，请填写车颜色，如白色" allowClear
              value={obj.carColor} onChange={(e) => {
                setObj({ ...obj, carColor: e.target.value })
              }} />
          </Col>
        </Row>
        <br />
        <Row gutter={24}>
          <Col span={4}>车牌类型</Col>
          <Col span={20}>
            <Select
              style={{ width: "100%" }}
              showSearch
              size="large"
              onChange={(e) => {
                setObj({ ...obj, leaseType: e })
              }}
              placeholder="必填，请选择车牌类型"
              optionFilterProp="children"
              filterOption={(input, option) =>
                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
              }
              options={[
                {
                  value: 'H',
                  label: '月租车',
                },
                {
                  value: 'S',
                  label: '出售车辆',
                },
                {
                  value: 'I',
                  label: '内部车',
                },
                {
                  value: 'NM',
                  label: '免费车',
                },
              ]}
            />
          </Col>
        </Row>
        <br />
        <Row gutter={24}>
          <Col span={4}>业主车辆</Col>
          <Col span={20}>
            <Select
              style={{ width: "100%" }}
              showSearch
              size="large"
              onChange={(e) => {
                setObj({ ...obj, value: e })
              }}
              placeholder="业主车辆"
              optionFilterProp="children"
              filterOption={(input, option) =>
                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
              }
              options={[
                {
                  value: 'false',
                  label: '否',
                },
                {
                  value: 'true',
                  label: '是',
                },
              ]}
            />
          </Col>
        </Row>
        <br />
        <Row gutter={24}>
          <Col span={4}>备注</Col>
          <Col span={20}>
            <Input placeholder="请填写备注信息" allowClear
              value={obj.remark} onChange={(e) => {
                setObj({ ...obj, remark: e.target.value })
              }} />
          </Col>
        </Row>
      </Card>
      <Button type="primary" onClick={() => { submitTo() }}>完成</Button>&emsp;
      <Button
        type="primary"
        onClick={() => {
          props.setCurrent(1);
        }}
      >
        上一步
      </Button>
    </div>
  );
}

export default VehicleInformation;
